<template>
    <div class="sjplatformSelectForm">
        <el-form :inline="true">
            <el-form-item label="任务名称">
                <el-input v-model="taskData.queryCondition.taskName" placeholder="请输入名称..." />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="sjplatformtable">
        <el-table :data="taskData.tableData" v-loading="loading" empty-text="暂无数据" stripe border>
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ $index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="taskName" label="任务名称" class-name="left-align" />
            <el-table-column prop="startTime" label="开始时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.startTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.endTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度" width="140">
                <template #default="{ row }">
                    <span>{{ row.progress == null ? '0%' : row.progress + '%' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template #default="{ row }">
                    <el-tooltip content="填写进度" placement="bottom" effect="light">
                        <i class="progress-icon" @click="openEditForm(row)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="taskData.total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="newTaskTableVisible" :title="formTitle" width="60%" draggable :destroy-on-close="true"
        :close-on-click-modal="false" class="fullscreen-dialog">
        <TaskEdit ref="taskEdit" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import commonUtil from "../../../utils/common";
import { useTaskTable } from "../../../hooks/ProjectManager/Do/useTaskTable";
import TaskEdit from "./TaskEdit.vue";

let taskEdit = ref(null);
let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let newTaskTableVisible = ref(false);
let formTitle = ref('');

let { taskData, projectStore, getTasksOfPerson, createTaskDo } = useTaskTable(currentPage, pageSize);
getTasksOfPerson();

//打开编辑窗口
function openEditForm(data) {
    formTitle.value = "任务进度";
    projectStore.taskModel = data;
    projectStore.resetTaskDoModel();
    projectStore.taskDoModel.taskId = data.id;
    newTaskTableVisible.value = true;
}

//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    searchData(); // 根据当前页获取数据
}

//取消
function cancel() {
    newTaskTableVisible.value = !newTaskTableVisible.value;
}

//确定
function confirm() {
    if (!taskEdit.value.hasChild) {
        createTaskDo().then(() => {
            newTaskTableVisible.value = !newTaskTableVisible.value;
            getTasksOfPerson();
        })
    }
    else {
        newTaskTableVisible.value = !newTaskTableVisible.value;
    }
}

//查询按钮
function searchData() {
    loading.value = true;
    currentPage.value = 1;
    getTasksOfPerson();
    loading.value = false;
}
</script>